<template>
<div class="timeline-block">
  <el-backtop></el-backtop>
    <el-button style="margin-left: 80%;" plain
    @click="drawerLoad">看看ta的时间线...</el-button>
    <el-drawer
      :visible="drawer"
      :direction="rtl"
      :before-close="handleClose">
      <span style="width: 16px;margin-left: 20%;">{{penpal_name}}的时间线...</span>
      <el-timeline style="margin-top: 10%;">
        <el-timeline-item placement="top"
        v-for="(diary,did) in penpal_diaryList"
        :key="diary.did"
        :timestamp="diary.editTime">
          <el-card class = "card">
            <div><h4>{{diary.title}}</h4></div>
            <div><p>{{diary.content}}</p></div>
            <el-button @click="gotoWrite(diary.did,2,penpal_id)" plain>查看全文</el-button>
          </el-card>
          </el-timeline-item>
      </el-timeline>
    </el-drawer>

  <el-timeline>
    <el-timeline-item placement="top"
    v-for="(diary,did) in diaryList"
    :key="diary.did"
    :timestamp="diary.editTime">

      <el-card>
        <div><h4>{{diary.title}}</h4></div>
        <div><p>{{diary.content}}</p></div>
        <el-button @click="gotoWrite(diary.did,2,uid)" plain>查看全文</el-button>
      </el-card>
      </el-timeline-item>
  </el-timeline>
</div>
</template>

<script>
  import axios from 'axios'
  import Write from './Write.vue'
  import Login from '../Jun/Login.vue'

  export default {
    mounted(){
      var _this = this;
      _this.uid = localStorage.getItem('user_id');
      _this.penpal_id = localStorage.getItem('user_penpal_id');
      var token = localStorage.getItem("token");

      //发给后端拿到自己时间线的文章
      axios.post('http://oneday.vaiwan.com/diary/show',{
          uid:_this.uid,
          state:2
      },{headers:{
          token:`${token}`},
      }).then(function(response){
        _this.diaryList = response.data.data;
      }).catch(function(error){
         alert("请重新登录！");
         _this.$router.push("/");
      });
    },
    methods:{
      gotoWrite(did,state,this_id){
        this.$router.push({
          path:'/write',
          query:{did:did,
          state:state,
          this_id:this_id}
        });
      },
      handleClose(done) {
        var _this = this;
            this.$confirm('确认关闭？')
               .then(_ => {
                done();
                _this.drawer = false;
              })
               .catch(_ => {});
           },
      drawerLoad(){
        var _this = this;
        var token = localStorage.getItem("token");
        //判断账号是否绑定
        if(this.penpal_id == 0){  //如果为零说明账号未绑定，给drawer设置false不显示抽屉，弹窗显示未绑定
          _this.drawer = false;
          this.$message({
            message: '还没有那个ta哦！快去广场找找看！',
            type:'warning'
          });
        }else{  //如果penpal_id不为零说明账号已绑定，给drawer设置true显示抽屉
          _this.drawer = true;
          //向后端发送请求，拿到好友的时间线列表
          axios.post('http://oneday.vaiwan.com/diary/show',{
              uid:_this.penpal_id,
              state:2
          },{headers:{
          token:`${token}`},
          }).then(function(response){
            _this.penpal_diaryList = response.data.data;
          }).catch(function(error){
            alert("请重新登录！");
            _this.$router.push("/");
          });
          //向后端发送请求，拿到好友的名字
          axios.post('http://oneday.vaiwan.com/user/show/'+this.penpal_id,{
              uid:_this.penpal_id,
          },{headers:{
          token:`${token}`},
          }).then(function(response){
            _this.penpal_name = response.data.data.name;
            console.log(response);
          }).catch(function(error){
            alert("请重新登录！");
            _this.$router.push("/");
          });
        };
      }
    },
    created(){

    },
    data(){
      return{
        uid:'',
        penpal_name:'',
        penpal_id:'',
        drawer:false,
        diaryList:[{
          did:'',
          title:'',
          content:'',
          editTime:'',
          state:2
        }],
        penpal_diaryList:[{
          did:'',
          title:'',
          content:'',
          editTime:'',
          state:2
        }]

        /*测试用数组
        diaryList:[{
          did:'0',
          editTime:'2022-04-12',
          title:'a',
          content:'aa',
          state:2
        },{
          did:'1',
          editTime:'2022-04-11',
          title:'b',
          content:'aad',
          state:2
        },{
          did:'2',
          editTime:'2022-04-10',
          title:'av',
          content:'aaaa',
          state:2
        }]
        */
      }
    }
  }
</script>
